import React from 'react';
import classnames from 'classnames';
import PropTypes from 'prop-types';
import { observer } from 'mobx-react';
import Icon from 'components/icon';
import css from './index.less';

@observer
class Element extends React.Component {

  static propTypes = {
    element: PropTypes.object,
    onClickElement: PropTypes.func,
  };

  static defaultProps = {
    element: {},
    onClickElement: () => {},
  };

  render() {
    const { element, className, onClickElement } = this.props;
    // console.log('element', element);

    const props = {
      className: classnames([css.layout, className]),
      onClick: () => {
        onClickElement(element);
      },
    };

    const visibleProps = {
      className: css.icon,
      type: element.visible ? 'icon-element-show' : 'icon-element-hide',
      onClick: () => {
        element.update('visible', !element.visible);
      }
    };

    const imgProps = {
      className: css.img,
      src: element.src,
      title: element.title,
      alt: '帧元素',
    };

    const lockProps = {
      className: css.icon,
      type: element.lock ? 'icon-element-lock' : 'icon-element-unlock',
      onClick: () => {
        element.update('lock', !element.lock);
      }
    };

    return (
      <div {...props}>
        <div className={css.ele}>
          <Icon {...visibleProps}/>
          <img {...imgProps}/>
          <span className={css.title}>
            {
              element.title.length > 10 ? `${element.title.substring(0, 10)}...` : element.title
            }
            </span>
          <Icon {...lockProps}/>
        </div>
      </div>
    );
  }
}
export default Element;
